
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="card">
        <div class="mycard">
            <p>我的天气</p>
            
        </div>
        <div class="search">
            <input type="text" placeholder="请输入城市名称" class="search-bar">
            <button onclick="showalert()">搜索</button>
        </div>
        <div class="weatherloading">
            <div class="location">
                <p class="city">甘肃</p>
            </div>
            <div class="temperature">
                <h1 class="temperature-degree">10°C~24°C</h1>
                <div class="weather-description">多云</div>
                <div class="humidity">相对湿度:50%</div>
                <div class="wind">风速:20公里/小时</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" >
        var btn=document.querySelector('button');
        var txt=document.querySelector('input');
        
        btn.onclick=function(){


            var val=txt.value;
            var xhr=new XMLHttpRequest();
            xhr.open('get','https://restapi.amap.com/v3/weather/weatherInfo?key=3f6a51edf7357fc78b56484202b2a6c4&city='+val);
            

            if(val==''){
                alert('请输入城市名称');
            }



            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseText);
                    var responseObj = JSON.parse(xhr.responseText);
                    var city = responseObj.lives[0].city;
                    console.log('城市名称：', city);
                    document.querySelector(".city").innerHTML = city;
                    var temperature = responseObj.lives[0].temperature;
                    document.querySelector(".temperature-degree").innerHTML=temperature+'°C~°C';
                    var weather = responseObj.lives[0].weather;
                    document.querySelector(".weather-description").innerHTML=weather;
                    var humidity = responseObj.lives[0].humidity;
                    document.querySelector(".humidity").innerHTML='相对湿度：'+humidity+'%';
                    var windpower = responseObj.lives[0].windpower;
                    document.querySelector(".wind").innerHTML='风速：'+windpower+'公里/小时';
            }
        };
        xhr.send();
    };
    </script>
     <div class="gitee">
        <a href="">码云</a>
    </div>
</body>
</html>